<!--
	.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。
	每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块。
-->

<!--
	每个 .vue 文件最多包含一个 <template> 块。
	内容将被提取并传递给 vue-template-compiler 为字符串，预处理为 JavaScript 渲染函数，并最终注入到从 <script> 导出的组件中。
-->
<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
			<el-breadcrumb-item>门店管理</el-breadcrumb-item>
		</el-breadcrumb>

		<el-divider></el-divider>
		
		<el-form :inline="true">
			<el-form-item label="门店名称">
				<el-input v-model="searchName" placeholder="门店名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" round @click="doSearch">查询</el-button>
				<el-button type="primary" round @click="doAddnew">新增</el-button>
			</el-form-item>
		</el-form>
		
		<!-- 表格 -->
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="#"></el-table-column>
			<el-table-column prop="name" label="门店名称"></el-table-column>
			<el-table-column prop="tel" label="联系电话"></el-table-column>
			<el-table-column prop="addr" label="门店地址"></el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="doEdit(scope.row)">编辑</el-button>
					<el-button type="text" size="small" @click="doDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<br>
		
		<!-- 分页 -->
		<el-pagination 
			layout="total, sizes, prev, pager, next, jumper"
			background
			:total="total"
			:current-page.sync="currentPage"
			:page-size.sync="pageSize"
			:page-sizes="[5, 10, 20, 30, 50]"
			@current-change="currentChange"
			@size-change="sizeChange">
		</el-pagination>
		
		<!-- 对话框 -->
		<el-dialog :title="dialogFormTitle" :visible.sync="dialogFormVisible">
			<el-form :model="formData" :rules="formRules" ref="form" :label-width="'80px'">
				<el-form-item label="门店名称" prop="name">
					<el-input v-model="formData.name"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="tel">
					<el-input v-model="formData.tel"></el-input>
				</el-form-item>
				<el-form-item label="门店地址" prop="addr">
					<el-input v-model="formData.addr"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="doSubmit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<!--
	每个 .vue 文件最多包含一个 <script> 块。
	这个脚本会作为一个 ES Module 来执行。
	它的默认导出应该是一个 Vue.js 的组件选项对象。也可以导出由 Vue.extend() 创建的扩展对象，但是普通对象是更好的选择。
	任何匹配 .js 文件 (或通过它的 lang 特性指定的扩展名) 的 webpack 规则都将会运用到这个 <script> 块的内容中。
-->
<script>
	export default {
		data() { //model数据
			return {
				tableData: [{
					id: 1001,
					name: '高新区分店',
					tel: '12345678901',
					addr: '南宁高新区xx路xx号'
				}],
				total: 0,
				currentPage: 1,
				pageSize: 5,
				searchName: '',
				dialogFormTitle: '添加门店',
				dialogFormVisible: false,
				formData: {name: '', tel: '', addr: ''},
				formRules: {
					name: [{required: true, message: '请输入门店名称'}],
					tel:  [{required: true, message: '请输入联系电话'}],
					addr: [{required: true, message: '请输入门店地址'}]
				}
			};
		},
		methods: {
			//加载表格数据
			loadTableData() {
				this.axios
					.get('http://localhost:8080/door/pagination', {
						params: {
							'currentPage': this.currentPage,
							'pageSize': this.pageSize,
							'name': this.searchName
						}
					}).then(response => {
						console.log(response);
						if (response.data.code === 0) {
							this.tableData = response.data.data;
						} else {
							this.$message.error(response.data.msg);
						}
					}).catch(error => {
						console.log(error);
					});
			},
			//current-page 改变时会触发
			currentChange() {
				this.loadTableData();
			},
			//page-size 改变时会触发
			sizeChange() {
				this.loadTableData();
			},
			//处理查询
			doSearch() {
				this.loadTableData();
			},
			//处理新增
			doAddnew() {
				this.dialogFormTitle = '新增门店';
				this.dialogFormVisible = true;
				this.formData = {name: '', tel: '', addr: ''};
				this.$nextTick(() => {
					this.$refs['form'].clearValidate();
				});
			},
			//处理提交
			doSubmit() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						let url = 'http://localhost:8080/door/add';
						if (this.formData.id) {
							url = 'http://localhost:8080/door/update';
						}
						this.axios.post(url, this.formData).then(response => {
							console.log(response);
							if (response.data.code === 0) {
								this.currentPage = 1;
							} else {
								this.$message.error(response.data.msg);
							}
						}).catch(error => {
							console.log(error);
						});
						this.dialogFormVisible = false;
					} else {
						return false;
					}
				});
			},
			//处理修改
			doEdit(row) {
				this.dialogFormTitle = '修改门店';
				this.dialogFormVisible = true;
				this.formData = JSON.parse(JSON.stringify(row));
				this.$nextTick(() => {
					this.$refs['form'].clearValidate();
				});
			},
			//处理删除
			doDelete(row) {
				alert(JSON.stringify(row))
			}
		},
		created() {
			this.loadTableData();
		}
	}
</script>

<!--
	一个 .vue 文件可以包含多个 <style> 标签。
	<style> 标签可以有 scoped 或者 module 属性 。具有不同封装模式的多个 <style> 标签可以在同一个组件中混合使用。
-->
<style>
</style>
